<template>
    <div class="recommend">
        
        <div class="recommend-item" v-for="item in recommends.slice(0, 4)" :key="item.id">
            <a href="" @click.prevent="god(item.id)">
                <img v-lazy="item.cover_url" alt="">
                <div>{{item.title}}</div>
            </a>
        </div>
        
    </div>
</template>

<script>

    // 带r是路由器，不带r是接收参数
    import {useRouter} from 'vue-router';

    export default {
        name: "Recommend",
        props: {
            recommends: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        setup() {
            const router = useRouter()
            
            const god = (id) => {
                router.push({
                    path: '/detail',
                    query: {id}
                })
            }
            
            return {
                god,
            }
            
        }
    }
</script>

<style scoped lang="scss">

    .recommend {
        display: flex;
        text-align: center;
        padding: 15px 0 30px;
        border-bottom: 8px solid #eee;
        font-size: 12px;
    }
    
    .recommend-item {
        flex: 1;
        img {
            width: 70px;
            height: 70px;
            margin-bottom: 10px;
        }
    }
    

</style>